<template>
  <div>
    <div v-if="desensitized">
      {{ desensitizedValue }}
      <ArkIconFont class="cursor-pointer" cls="icon-eye-o" @click.stop="desensitized = false"/>
    </div>

    <div v-else>
      {{ value }}
      <ArkIconFont class="cursor-pointer" cls="icon-closed-eye" @click.stop="desensitized = true"/>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import ArkIconFont from "@/components/ark-component-v1/ark-iconfont/ArkIconFont.vue";

export default defineComponent({
  name: "ArkDesensitized",
  components: {ArkIconFont},
  props: {
    value: String,
    desensitizedValue: String,
  },
  data() {
    return {
      desensitized: true,
    };
  },
});
</script>

<style scoped></style>
